<template>
  <div class="swiper-container" ref="cur">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(carousel, index) in skuImageList" :key="carousel.id">
        <img :src="carousel.imgUrl" :class="{ active: currentIndex == index }" @click="changeCurrentIndex(index)" />
      </div>
    </div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>
<script>
import Swiper from 'swiper'
export default {
  name: 'ImageList',
  data() {
    return {
      currentIndex: 0,
    }
  },
  props: ['skuImageList'],
  watch: {
    skuImageList(newval, oldval) {
      this.$nextTick(() => {
        new Swiper(this.$refs.cur, {
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          slidesPerView: 3,
          slidesPerGroup: 1,
          grid: {
            fill: 'column',
            rows: 1,
          },
        })
      })
    },
  },
  methods: {
    changeCurrentIndex(index) {
      this.currentIndex = index
      // 通知兄弟组件当前的索引值
      this.$bus.$emit('getIndex', this.currentIndex)
    },
  },
}
</script>
<style scoped>
.swiper-container {
  width: 400px;
  height: 50px;
  margin-top: 5px;
  box-sizing: border-box;
  --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
  --swiper-navigation-color: #666666; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 10px; /* 设置按钮大小 */
}
.swiper-slide {
  box-sizing: border-box;
  padding: 0 20px;
}
.swiper-slide img {
  width: 50px;
  height: 50px;
  border: 1px solid #cccccc;
  box-sizing: border-box;
}
/* .swiper-slide img:hover, */
.swiper-slide img.active {
  border: 1px solid #ff6600;
}
.swiper-button-prev {
  background: #ebebeb;
  border: 1px solid #ccc;
  top: 3px;
  left: 0;
  width: 10px;
  height: 50px;
}
.swiper-button-next {
  background: #ebebeb;
  border: 1px solid #ccc;
  top: 0;
  right: 0;
  width: 10px;
  height: 50px;
}
</style>
